<template>
  <div>
    <!-- 面包屑导航栏 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>-->
    <bread :title="title"></bread>
    <!-- 卡片 包裹列表内容 -->
    <el-card class="box-card">
      <!-- 提示信息 -->
      <el-alert style="margin-bottom: 15px" title="添加商品信息" type="info" center show-icon></el-alert>
      <!-- 步骤条展示内容 -->
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- tab标签页 -->
      <el-tabs tab-position="left" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="0">
          <!-- 基本信息 -->
          <el-form :model="addGoods" :rules="rules" ref="ruleFormRef" label-width="100px">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoods.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoods.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoods.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoods.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                v-model="argument"
                :options="categoriesData"
                :props="{expandTrigger: 'hover',value:'cat_id',label:'cat_name'}"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <!-- 商品参数 -->
          <div v-for="item in manyDataList" :key="item.attr_id">
            {{item.attr_name}}
            <el-checkbox-group v-model="item.attr_vals" style="margin:10px">
              <el-checkbox :label="items" v-for="(items, i) in item.attr_vals" :key="i">{{ items }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">
          <!-- 商品属性 -->
          <div v-for="item in onlyDataList" :key="item.attr_id">
            <p>{{item.attr_name}}:</p>
            <el-input v-model="item.attr_vals"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <!-- 商品图片 -->
          <el-upload
            :action="actionURL"
            :on-preview="handlePreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            list-type="picture"
            :headers="headerObj"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <!-- 商品内容 -->
          <!-- 富文本框 -->
          <quill-editor v-model="addGoods.goods_introduce" ref="myQuillEditor"></quill-editor>
          <!-- 添加按钮 -->
          <el-button type="primary" @click="addGoodsData">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="图片展示" :visible.sync="dialogVisible" width="70%">
      <img :src="imgs" alt="eee" title="haha" />
    </el-dialog>
  </div>
</template>
           
<script>
//导入组件
import _ from "lodash";
import bread from "../common/breadcrumb.vue";
import { categoriesList, paramsList, addGoodsList_api } from "@/api";
export default {
  data() {
    return {
      //传给子级的参数  冒泡
      title: { one1: "商品管理", two2: "添加商品" },
      active: 0,
      activeName: 0,
      categoriesData: [],
      //动态参数获取存储位置
      manyDataList: [],
      //静态属性获取存储位置
      onlyDataList: [],
      argument: [],
      //添加数据所需参数
      addGoods: {
        //姓名
        goods_name: "",
        //分类列表  以‘,’分割
        goods_cat: "",
        //商品价格
        goods_price: 0,
        //商品数量
        goods_number: 0,
        //商品重量
        goods_weight: 0,
        //商品介绍
        goods_introduce: "",
        //图片
        pics: [],
        //商品参数
        attrs: []
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请输入重量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ]
      },
      //图片存储到哪里的路径
      actionURL: "http://192.168.82.74:8888/api/private/v1/upload",
      //因为图片不能直接获取token  所以需要手动设置token
      headerObj: {
        Authorization: window.sessionStorage.getItem("token")
      },
      dialogVisible: false,
      imgs: ""
    };
  },
  methods: {
    //获取商品列表信息
    async getCategoriesList() {
      var { data: res } = await categoriesList({ type: [3] });
      this.categoriesData = res.data;
      // console.log(res,89);
    },
    //判断级联选择器是否是选择第三项
    handleChange() {
      if (this.argument.length !== 3) {
        return (this.argument = []);
      }
      // console.log(this.cartId);
    },
    //切换步骤功能
    async handleClick(tab, event) {
      this.active = Number(tab.name);
      if (tab.name == 1) {
        var { data: res } = await paramsList({ id: this.cartId, sel: "many" });
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        });
        this.manyDataList = res.data;
      }
      if (tab.name == 2) {
        var { data: res } = await paramsList({ id: this.cartId, sel: "only" });
        this.onlyDataList = res.data;
      }
    },
    //移除图片时执行的函数钩子
    handleRemove(file, fileList) {
      this.addGoods.pics = this.addGoods.pics.filter(item => {
        return item.pic != file.response.data.tmp_path;
      });
      // console.log(file, fileList,99);
      console.log(this.addGoods);
    },
    //点击图片时执行的函数
    handlePreview(file) {
      console.log(file, 99);
      this.dialogVisible = true;
      this.imgs = "http://192.168.82.74:8888/" + file.response.data.tmp_path;
      console.log(this.imgs);

      // this.imgs = "http://192.168.82.74:8888/tmp_uploads/bde103fd0423f91303d9315618a9d36c.jpg";
    },
    handleSuccess(file) {
      console.log(file, 88);

      this.addGoods.pics.push({
        pic: file.data.tmp_path
      });
    },
    //添加商品按钮触发事件
    async addGoodsData() {
      this.manyDataList.forEach(item => {
        const haha = {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(" ")
        };
        this.addGoods.attrs.push(haha);
      });
      this.onlyDataList.forEach(item => {
        const haha = {
          attr_id: item.attr_id,
          attr_value: item.attr_vals
        };
        this.addGoods.attrs.push(haha);
      });
      //深拷贝addGoods
      var form = _.cloneDeep(this.addGoods);
      form.goods_cat = this.argument.join(",");
      console.log(form, 11);
      var { data: res } = await addGoodsList_api(form);
      console.log(res);
      if (res.meta.status != 200) {
        return this.$message.error("添加商品失败！");
      }
      this.$router.push("/goods");
    }
  },
  components: {
    bread
  },
  created() {
    this.getCategoriesList();
  },
  computed: {
    cartId() {
      if (this.argument.length !== 3) {
        return 9999;
      } else {
        return this.argument[this.argument.length - 1];
      }
    }
  }
};
</script>
<style scoped>
img {
  width: 100%;
}
</style>